<template>
	<z-paging ref="paging" class="z_pag" v-model="reCourses" @query="getCourses"
		:hide-loading-more-when-no-more-by-limit="5">
		<view class="list-item flex-row" :key="item._id" v-for="item in reCourses" @click="openCourse(item._id)">
			<u-image :src="item.thumb" :lazy-load="true" class="image_11" mode="aspectFill">
			</u-image>
			<view class="right-group flex-col">
				<text class="text_11">{{ item.title }}</text>
				<view class="center-group flex-row">
					<view class="left-text-wrapper" :key="dynamicTag" v-for="dynamicTag in item.dynamicTags">
						{{dynamicTag}}
					</view>
				</view>
				<view class="justify-between">
					<text class="text_17">{{item.user_count}}人已购</text>
					<text class="text_19">￥{{item.charge / 100}}</text>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				cid: '',
				text: '',
				reCourses: []
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			getCourses(pageIndex, pageSize) {
				vk.callFunction({
					url: 'client/course/pub/role_course',
					title: '请求中...',
					data: {
						pageIndex,
						pageSize,
					},
					success: function(data) {
						that.$refs.paging.complete(data.rows);
					}
				});
			},
			// 推荐课程详情
			openCourse(id) {
				uni.vk.navigateTo('/uni_modules/uce-course/pages/detail/class-detail?_id=' + id, false);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.list-item {
		padding: 20rpx 20rpx 40rpx;
		border-bottom: 1px solid #F0F0F0;

		&:not(:first-of-type) {
			margin-top: 40rpx;
		}

		.image_11 {
			border-radius: 8rpx;
			width: 284rpx !important;
			height: 182rpx !important;
		}

		.right-group {
			margin-left: 26rpx;
			flex: 1 1 auto;

			.text_11 {
				color: rgb(51, 51, 51);
				font-size: 30rpx;
				line-height: 35rpx;
				text-align: left;
			}

			.center-group {
				margin-top: 33rpx;
				color: rgb(255, 150, 12);
				font-size: 20rpx;
				line-height: 28rpx;
				white-space: nowrap;

				.left-text-wrapper {
					background-repeat: no-repeat;
					padding: 4rpx 14rpx;
					margin-right: 20rpx;
					background: rgba(255, 150, 12, 0.12);
					border: 1rpx solid #FF960C;
					border-radius: 16rpx;
				}
			}

			.text_17 {
				margin-top: 19rpx;
				color: rgb(153, 153, 153);
				font-size: 20rpx;
				line-height: 24rpx;
				white-space: nowrap;
			}

			.text_19 {
				color: rgb(246, 21, 21);
				font-size: 36rpx;
				margin-top: 4rpx;
				white-space: nowrap;
			}
		}
	}
</style>